<template>
  <div class="q-pa-md">
    <q-table
      :title="this.currentUserInfo.studentNumber+' 个人信息'"
      style="margin-top: 20px"
      :data="this.studentInfoTable.data"
      :columns="this.studentInfoTable.columns"
      :filter="this.studentInfoTable.filter"
      row-key="name"
      no-data-label="没有找到任何信息"
    >
      <!-- 自定义无数据插槽 -->
      <template v-slot:no-data="{ icon, message, filter }">
        <div class="full-width row flex-center text-primary q-gutter-sm">
          <q-icon size="2em" name="sentiment_dissatisfied"/>
          <span>
             {{ message }}
          </span>
          <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon"/>
        </div>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td :props="props" key="studentNumber">{{props.row.studentNumber}}</q-td>
          <q-td :props="props" key="studentRealName">{{props.row.studentRealName}}</q-td>
          <q-td :props="props" key="studentSex">{{props.row.studentSex}}</q-td>
          <q-td :props="props" key="collegeName">{{props.row.collegeName}}</q-td>
          <q-td :props="props" key="gradeId">{{props.row.gradeId}}</q-td>
          <q-td :props="props" key="majorName">{{props.row.majorName}}</q-td>
          <q-td :props="props" key="className">{{props.row.className}}</q-td>
          <q-td :props="props" key="studentTel">{{props.row.studentTel}}</q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  name: 'ClassAdminCenter',
  data () {
    return {
      currentUserInfo: JSON.parse(sessionStorage.getItem('user_object')),
      studentInfoTable: {
        loading: false,
        filter: '',
        columns: [
          { name: 'studentNumber', label: '学号', align: 'left', field: 'studentNumber', sortable: true },
          { name: 'studentRealName', label: '姓名', align: 'left', field: 'studentRealName' },
          { name: 'studentSex', label: '性别', align: 'left', field: 'studentSex' },
          { name: 'collegeName', label: '学院', align: 'left', field: 'collegeName', sortable: true },
          { name: 'gradeId', label: '年级', align: 'left', field: 'gradeId' },
          { name: 'majorName', label: '专业', align: 'left', field: 'majorName', sortable: true },
          { name: 'className', label: '班级', align: 'left', field: 'className', sortable: true },
          { name: 'studentTel', label: '电话', align: 'left', field: 'studentTel', sortable: true }

        ],
        data: []
      }
    }
  },

  created () {

  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    /**
       * 获取用户信息
       */
    getUserInfo () {
      const query = {
        url: 'AdminInfoServlet',
        method: 'get',
        params: {
          studentNumber: this.currentUserInfo.studentNumber
        }
      }
      // 调用内置 ajax 方法
      this.$fetchData(query).then((res) => {
        console.log(res)
        const query1 = {
          url: 'findAllStudentServlet',
          method: 'get',
          params: {
            studentNumber: this.res.data.studentNumber
          }
        }
        // 调用内置 ajax 方法
        this.$fetchData(query1).then((res) => {
          this.studentInfoTable.data = [res.data]
        }).catch(e => {
          console.log(e)
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>
  .user-center {
    font-size: 2rem;
    height: 200px;
    background-color: #4AD0D1;
  }
</style>
